$(function () {
    // 需求1：自定义校验规则
    let form = layui.form
    // form对象中有一个方法verify专门定义校验规则使用：form.verify()
    // 参数是对象，属性是校验名称，值是校验规则
    form.verify({
        nickname: [
            /^[\S]{1,10}$/,
            '昵称的长度为1-10的非空字符！'
        ]
    })

    // 需求2： 渲染用户信息，封装成函数，后面还要用
    let layer = layui.layer
    initUserInfo()  //调用函数
    function initUserInfo() {
        axios({
            url: '/my/userinfo',
            method: 'get',
        }).then(res => {
            //成功回调
            // console.log(res.data)
            // 判断
            if (res.data.status !== 0) {
                return layer.msg(res.data.data)
            }
            // 根据官网为form表单赋值
            // 属性名与form表单的lay-filter值相同
            form.val('formUserInfo', res.data.data)
        })
    }


    // 需求3 重置功能
    // 1.为form表单注册重置事件
    // $('form').on('reset',function(e){
    // 2.或为重置按钮注册点击事件
    $('#btnReset').on('click', function (e) {
        // 清除表单默认样式
        e.preventDefault()
        // 调用函数，重新渲染
        initUserInfo()
    })

    // 需求4 修改用户信息
    $('form').on('submit', function (e) {
        e.preventDefault()
        axios({
            url: '/my/userinfo',
            method: 'post',
            // 设置了参数，根据参数类型会设置头信息：a=1&b=2&c=3
            data: $(this).serialize()
        }).then(res => {
            //成功回调
            // console.log(res)
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 成功。提示
            layer.msg("用户信息已修改！")
            // 直接渲染到页面，需要调用index.js的函数
            // 直接调用无效，通过本网页的window找到他的父元素（index.js的window）
            // 调用window父元素window的前提是，该函数是全局函数，不能写在入口函数中
            window.parent.getUserInfo()
        });
    })
})


